<template>
<div>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="500"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px"
  >
    <a-descriptions :title="item.title" :column="1" v-for="(item, index) in fieldArr" :key="index">
      <a-descriptions-item v-for="(obj, i) in item.arr" :key="i">
        <template slot="label">
          {{obj.label}}
        </template>
        <!--受害人性别-->
        <template v-if="datas[obj.field] && obj.field==='victimGender'">
          {{filterMultiDictText('sex', datas[obj.field])}}
        </template>
        <!--受害人职业-->
        <template v-else-if="datas[obj.field] && obj.field==='victimOccupation'">
          {{filterMultiDictText('victim_occupation', datas[obj.field])}}
        </template>
        <!--受害人学历-->
        <template v-else-if="datas[obj.field] && obj.field==='victimsEducation'">
          {{filterMultiDictText('victim_education', datas[obj.field])}}
        </template>
        <!--录入部级侦办平台-->
        <template v-else-if="datas[obj.field] && obj.field==='investigationPlatform'">
          {{filterMultiDictText('investigation_platform', datas[obj.field])}}
        </template>
        <!--受害人账号类型-->
        <template v-else-if="datas[obj.field] && obj.field==='victimAccountType'">
          {{filterMultiDictText('victim_account_type', datas[obj.field])}}
        </template>
        <!--嫌疑人账号类型-->
        <template v-else-if="datas[obj.field] && obj.field==='suspectAccountType'">
          {{filterMultiDictText('suspect_account_type', datas[obj.field])}}
        </template>
        <!--转账方式-->
        <template v-else-if="datas[obj.field] && obj.field==='transferMethod'">
          {{filterMultiDictText('transfer_way', datas[obj.field])}}
        </template>
        <!--社交工具-->
        <template v-else-if="datas[obj.field] && obj.field==='socialTools'">
          {{filterMultiDictText('social_tools', datas[obj.field])}}
        </template>
        <template v-else-if="datas[obj.field]">
          {{datas[obj.field]}}
        </template>
        <template v-else> 无 </template>
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</div>
</template>

<script>
import {getDictItemsFromCache} from '@/api/api'
import * as caseApi from '@/api/modules/case.js'
import moment from 'moment'

export default {
  data() {
    return {
      title: '详情',
      visible: false,
      datas: {},
      fieldArr: [
        {
          title: '案件基本信息',
          arr: [
            { field: 'caseHandlingUnit', label: '办案单位' },
            { field: 'timeOfCrime', label: '案发时间' },
            { field: 'createTime', label: '数据入库时间' },
            { field: 'acceptanceUnit', label: '受理单位' },
            { field: 'caseHandler', label: '办案人' },
            { field: 'sentencedPerson', label: '判刑人' },
            { field: 'contactNumber', label: '联系电话' },
            { field: 'victimGender', label: '受害人性别' },
            { field: 'victimOccupation', label: '受害人职业' },
            { field: 'victimsEducation', label: '受害人学历' },
            { field: 'victimIdCard', label: '受害人身份证号码' },
            { field: 'ageOfVictim', label: '受害人年龄' },
            { field: 'accidentDescription', label: '案情描述' },
            { field: 'investigationPlatform	', label: '录入部级侦办平台' },
          ]
        },
        {
          title: '嫌疑人信息',
          arr: [
            { field: 'nameOfSuspect', label: '嫌疑人姓名' },
            { field: 'suspectIdNumber', label: '嫌疑人身份证号' },
            { field: 'startTimeDetention', label: '刑拘开始时间' },
            { field: 'stopTimeDetention', label: '刑拘结束时间' },
            { field: 'placeCriminalDetention', label: '刑拘地点' },
          ],
        },
        {
          title: '涉案账号信息',
          arr: [
            { field: 'suspectAccountName', label: '嫌疑人账户名' },
            { field: 'suspectAccountNumber', label: '嫌疑人账号' },
            { field: 'victimAccountType', label: '受害人账号类型' },
            { field: 'suspectAccountType', label: '嫌疑人账号类型' },
            { field: 'transferTime', label: '转账时间' },
            { field: 'vctimAccountNumber', label: '受害人账号' },
            { field: 'transferMethod', label: '转账方式' },
            { field: 'remittanceAmount', label: '汇款金额（元）' }
          ],
        },
        {
          title: '涉案信息',
          arr: [
            { field: 'suspectTelephone', label: '嫌疑人电话' },
            { field: 'socialAccount', label: '社交账号' },
            { field: 'socialTools', label: '社交工具' },
            { field: 'websiteInvolved', label: '涉案网址' },
          ],
        },
        {
          title: '操作信息',
          arr: [
            { field: 'updateBy', label: '编辑人' },
            { field: 'updateTime', label: '编辑时间' },
          ],
        }
      ]
    }
  },
  methods: {
    moment,
    handle(record) {
      this.visible = true
      this.getRecord(record.id)
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    filterDictText(dictCode, text) {
      return this.$filterDictTextByCache(dictCode, text)
    },
    filterMultiDictText(dictCode, text) {
      if(!text) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    getRecord(id) {
      caseApi.getQueryById({id: id}).then((res) => {
        if (res.success) {
          this.datas = Object.assign({}, this.datas, res.result)
        } else {
          this.$message.warn(res.message);
        }
      }).catch(e=>{
        this.$message.warn("请求失败！");
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-descriptions-title {
  background-color: #eee;
  font-weight: normal;
  padding: 10px 10px;
}
</style>